<template>
  <view style="background-color: #fff">
    <view v-if="!hasList" class="flex-col-hcenter">
      <image :src="fillder1" class="img-empty"></image>
      <text style="font-size: 24rpx; color: #999; margin-bottom: 76rpx">暂无加注机</text>
    </view>
    <view v-for="(item, index) in list" :key="index" class="card" @click="pick(item)">
      <image :src="item.image" class="img"></image>
      <view class="flex-col-jcsb">
        <view>
          <image src="../../static/filling/icon1.png" class="icon"></image>
          <text class="title">{{ item.name }}</text>
        </view>
        <view>
          <text style="color: #666">{{ item.distance }}</text>
         <!-- <uni-icons type="phone" color="#1B91FF" size="18" style="margin: 0 10rpx 0 16rpx"></uni-icons>
          <text style="color: #1b91ff">{{ item.mobile }}</text> -->
        </view>
        <view style="font-size: 24rpx; color: #666;overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;width:90%;">{{ item.address }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, PropType } from 'vue';
import { fillder1 } from '@/utils/Static';
const props = defineProps({
  list: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
});

// static
const hasList = computed(() => props.list.length > 0);

const emit = defineEmits(['pick']);

function pick(item) {
  emit('pick', item);
}
</script>

<style scoped lang="less">
.img-empty {
  width: 266rpx;
  height: 204rpx;
  margin: 46rpx 0 18rpx;
}

.card {
  margin-bottom: 15rpx;
  padding: 15rpx;
  border-radius: 5px;
  box-shadow: 2rpx 4rpx 8rpx 0rpx rgba(204, 204, 204, 0.5);
  display: grid;
  grid-template-columns: 126rpx auto;
  column-gap: 20rpx;

  .img {
    width: 128rpx;
    height: 128rpx;
    border-radius: 5px;
  }

  .icon {
    width: 26rpx;
    height: 26rpx;
    margin-right: 6rpx;
  }

  .title {
    font-size: 32rpx;
    // line-height: 42rpx;
    letter-spacing: 2rpx;
    color: #333;
  }
}
</style>
